<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no">
        
        <title>发优惠券</title>
        
        <link rel="stylesheet" href="css/send.css?t=201611301751" />
    </head>
    <body id="coupon" v-cloak>
		<!--优惠券-->
		<div class="coupon-list" v-show="couponShow">
			<div class="item">
				<a class="lt" href="javascript:;">
					<p class="price">&yen;<span>{{parseInt(couponValue)}}</span></p>
				</a>
				<div class="rt">
					<div class="name">{{couponTypeTxt}}</div>
					<div class="explain">{{activityName}}</div>
					<div class="tips">{{couponRule}}</div>
				</div>
			</div>
			<div class="box">
				<div class="prompt">请输入接收该优惠券的易购账号(仅支持手机号注册的用户)</div>
				<div class="ipt-box">
					<div class="name">易购账号：</div>
					<input type="tel" class="ipt" name="" id="" value="" v-model="phoneNum" placeholder="请输入手机号码" />
				</div>
				<div class="tips">
					<p v-show="errTips"><span class="sprites i-error"></span><span>{{errText}}</span></p>
				</div>
				<a class="btn-ok" href="javascript:;" :class="{'dis':!regNum(phoneNum) && clickDis}" @click="checkNumber(phoneNum)">确定</a>
			</div>
		</div>
		
		<!--发优惠券-->
		<div class="coupon-send" v-show="resultShow">
			<template v-if="resultSuccess">
				<div class="sprites i-older-success"></div>
				<h3>发券成功</h3>
				<p>现在登录{{phoneNum}}的易购账号，已经可以使用这张券了哦</p>
				<p>在“<a class="link" href="javascript:;" @click="sendRecord">发券记录</a>”中可查看发券成功的记录。</p>
			</template>
			<template v-else>
				<div class="sprites i-older-overdue"></div>
				<h3>发券失败</h3>
				<p class="ct">{{errorMessage}}</p>
			</template>
		</div>
		
		<!--弹层-->
		<div class="popup" v-show="sendMsg">
			<div class="popup-bg">
				<div class="content-box">
					<div class="title">提醒</div>
					<template v-if="!tipsMsg">
						<div class="content">该手机号还未注册易购会员，发送注册链接，对方下载易购客户端并登录后，您即可获得佣金哦（佣金将随工资发放）</div>
						<div class="btn-box">
							<a class="btn cancel" href="javascript:;" @click="sendMsg=false">暂不发送</a>
							<a class="btn send" href="javascript:;" @click="sendSMS">去发送</a>
						</div>
					</template>
					<template v-else>
						<div class="content">该手机号还未注册易购会员，无法发券。</div>
						<div class="btn-box">
							<a class="btn ok" href="javascript:;" @click="sendMsg=false">确定</a>
						</div>
					</template>
				</div>
			</div>
		</div>
		
		<script src="js/zepto.min.js" type="text/javascript"></script>
		<script src="js/vue.min.js" type="text/javascript"></script>
		<script src="js/vue-resource.min.js" type="text/javascript"></script>
		<script src="js/common.js?t=201611301751" type="text/javascript"></script>
		<script type="text/javascript">
			var vm = new Vue({
                el: '#coupon',
                data: {
	                couponShow: true,
	                resultShow: false,
	                sendTimes:"",
	                remainTimes:"",
	                timeRetFlag:"",
	                retFlag:"",
	                phoneNum:"",
	                sendMsg: false,
	                tipsMsg: false,
	                errTips: false,
	                errText:"",
	                
	                activityId:"",
	                securityKey:"",
	                
	                couponValue:"",
	                couponTypeTxt:"",
	                activityName:"",
	                couponRule:"",
	                mobile: null,
	                
	                clickDis: true,
	                
	                registerMsg:"",
	                errorMessage:"",
	                resultSuccess: true,
	                
                    err: false,
                    errCtt: ""
                },
                computed: {
                    
                },
                methods: {
                	regNum: function(num){
                    	var reg = /^1\d{10}$/;
                    		return reg.test(num);
                   	},
                	couponDetail: function(){
                    	var urlArgs = Shop.getUrlArgs();
                    	this.mobile = urlArgs.mobile ? urlArgs.mobile : null;
						this.activityId = urlArgs.activityId;
						this.securityKey = urlArgs.securityKey;
	                	this.couponRule = urlArgs.couponRule;
	                	this.couponTypeTxt = urlArgs.couponTypeTxt;
	                	this.couponValue = urlArgs.couponValue;
	                	this.activityName = urlArgs.activityName;
                   	},
                   	checkNumber: function(num){
                    	var reg = /^1\d{10}$/,
                    		regNum = /^1(3|4|5|7|8)\d{9}$/;
                    	if(reg.test(num) && !regNum.test(num)){
                    		this.errTips = true;
                    		this.errText = "请输入正确的易购账号";
                    	}else if(reg.test(num) && regNum.test(num)){
                    		this.$http.post(DI.checkMemerByMobile, {
								mobile: num
							}).then(function(res) {
								if(res!=null && res.data.idsIntercepted==true){
									location.href = DI.login + "?redirectUrl=" + encodeURIComponent(location.href +"&mobile=" + num);
								    return;
								}
								var result = res.data;
								if(result.retFlag!="0") {
									this.errTips = false;
									this.tipsMsg = false;
									
									if(result.data.registerStatus == "2" || result.data.registerStatus == "4"){
										this.sendMsg = true;
										this.registerMsg = result.data.registerMsg;
									}else{
										this.sendMsg = false;
										if(this.clickDis){
											this.sendCoupon(num);
										}
									}
									vm.retFlag = result.retFlag;
								} else {
									this.errTips = true;
									this.errText = result.errMsg;
								}
				
							}, function(req) {
				
							});
                    	}
                    },
                	sendCoupon: function(num){
                		this.clickDis = false;
                		
                    	this.$http.post(DI.sendCoupon, {
                    		activityId: this.activityId,
                    		activityName: this.activityName,
							mobile: num,
							securityKey: this.securityKey
						}).then(function(res) {
							if(res!=null && res.data.idsIntercepted==true){
								location.href = DI.login + "?redirectUrl=" + encodeURIComponent(location.href +"&mobile=" + num);
							    return;
							}
							var result = res.data;
//							console.log(result);
							this.couponShow = false;
							this.resultShow =  true;
							this.clickDis = true;
							
							if(result.retFlag!="0") {
								this.resultSuccess = true;
							} else {
								this.resultSuccess = false;
								this.errorMessage = result.errorMessage;
							}
						}, function(req) {
			
						});
                   	},
                   	sendRecord: function(){
                    	location.href = "send_coupon_record.html";
                    },
                    sendSMS: function(){
                    	this.sendMsg = false;
                    	this.tipsMsg = false;
						var url;
						        
						if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){
							url = "sms:" + this.phoneNum + "&body=" + this.registerMsg;
						}else if(/(Android)/i.test(navigator.userAgent) && /(StorePlus)/i.test(navigator.userAgent)){
							url = "sms:" + this.phoneNum + "?body=" + this.registerMsg;
						}else{
							this.sendMsg = true;
							this.tipsMsg = true;
							
							return;
						}
						
						location.href = url;
                    }
                },
                ready: function(){
                	this.couponDetail();
                	if(this.mobile!=null){
                		this.phoneNum = this.mobile;
                	}
                }
            });
		</script>
    </body>
</html>